<template>
  <div class="articleItem">
    <div class="container">
      <div class="col-md-3 title">
        <img src="https://sfault-image.b0.upaiyun.com/144/759/1447599335-574af3cdc2192" height="366" width="576"/>
      </div>
      <div class="col-md-5 articleItem">
        <div><router-link :to="{path:'/articleContent/'+this.id}" class="title">{{title}}</router-link></div>
        <div class="brief">{{brief}}</div>
        <div class="tag">tag</div>
        <router-link :to="{path:'/articleContent/'+this.id}" class="readMore">Read&nbsp;&nbsp;More&nbsp;&nbsp;&gt;</router-link>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: ['title', 'brief', 'id']
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .readMore
    color: #18bc9c
  .readMore:hover
    text-decoration none
  .container
    margin-bottom 40px
  .title
    font-size 26px
    color #34495e
  .title:hover
    text-decoration none
  .title:visited
    text-decoration none
  .brief
    font-size 18px
    color #7f8c8d
  .articleItem .container img
    width 260px
    height 132px
    vertical-align middle
</style>
